<template>
  <div class="main-content" @click="handleUserActivity" @mousemove="handleUserActivity" @keydown="handleUserActivity">
    <!-- <div ref="lottieRef" class="lottie-box"></div> -->
     <!-- 动态控制 Lottie 动画显示 -->
    <div v-if="showLottie" ref="lottieRef" class="lottie-box"></div>
    <RouterView />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import lottie from 'lottie-web';
import { useRouter, useRoute } from 'vue-router';
const showLottie = ref(true); // 控制 Lottie 是否显示
const router = useRouter();
const route = useRoute();

// 响应式数据
const lottieRef = ref(null);
let animationInstance = null;

// 待机模式相关
const idleTimer = ref(null);
const idleTimeout = 3000000; // 正式5分钟无操作
// 处理用户活动
const handleUserActivity = () => {
  resetIdleTimer();
};

// 重置无操作定时器
const resetIdleTimer = () => {
  // 清除现有定时器
  if (idleTimer.value) {
    clearTimeout(idleTimer.value);
  }
  // 设置新的定时器
  idleTimer.value = setTimeout(enterStandbyMode, idleTimeout);
};

// 进入待机模式
const enterStandbyMode = () => {
  // 暂停动画
  // if (animationInstance) {
  //   animationInstance.pause();
  // }
  // 跳转到待机页面
  if (route.path !== '/') {
    router.push('/');
  }
};

// 添加事件监听器
const addEventListeners = () => {
  // 监听各种用户交互事件
  const events = ['click', 'mousemove', 'keydown', 'touchstart', 'scroll', 'mousedown'];
  events.forEach(event => {
    window.addEventListener(event, handleUserActivity, { passive: true });
  });
};

// 移除事件监听器
const removeEventListeners = () => {
  const events = ['click', 'mousemove', 'keydown', 'touchstart', 'scroll', 'mousedown'];
  events.forEach(event => {
    window.removeEventListener(event, handleUserActivity);
  });
};

// 初始化 Lottie 动画
const initLottieAnimation = () => {
  if (lottieRef.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieRef.value,
      path: '/animations/headImg.json',
      loop: true,
      autoplay: true,
    });
  }
};

// 监听路由变化
watch(() => route.path, (newPath) => {
  if (newPath === '/') {
    // 回到首页时恢复动画
    if (animationInstance) {
      animationInstance.play();
    }
    // 重置定时器
    resetIdleTimer();
  }
});

// 监听路由变化，控制 Lottie 显示/隐藏
// watch(
//   () => route.path,
//   (newPath) => {
//     if (newPath === '/company') {
//       showLottie.value = false;
//     } else {
//       showLottie.value = true;
//     }
//     // 路由变化时重置定时器
//     resetIdleTimer();
//   }
// );

onMounted(() => {
  // 初始化动画
  initLottieAnimation();
  // 添加事件监听
  addEventListeners();
  // 启动初始定时器
  resetIdleTimer();
  console.log('空闲检测已启动，5分钟无操作将进入待机模式');
});

onBeforeUnmount(() => {
  // 清理工作
  if (idleTimer.value) {
    clearTimeout(idleTimer.value);
  }

  removeEventListeners();

  if (animationInstance) {
    animationInstance.destroy();
  }
});
</script>

<style>
:root{
  width: 6240px;
  position: relative;
  z-index: -99999;
}
.lottie-box {
  z-index: -999;
  position: absolute;
  left: 0px;
  top: -54px;
  width: 6240px; /* 从6274px改为目标宽度6240px */
  height: 255px; /* 高度保持不变（或按比例微调，若动画有拉伸） */
  font-size: 80px;
}
body {
  width: 6240px; /* 从6274px改为目标宽度6240px */
  height: 1456px; /* 从2240px改为目标高度1456px */
  background-image: url("/imgs/ningbo/图层 973.png");
  background-position: left;
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 新增：确保背景图完整覆盖新尺寸 */
  margin: 0;
  overflow: hidden; /* 保持隐藏滚动条 */
}
.headPic {
  z-index: -999;
  position: absolute;
  left: 0px;
  top: -25px;
  width: 6240px; /* 从9600px改为目标宽度6240px */
  height: 255px; /* 按比例保持高度（或根据实际设计调整） */
  font-size: 80px;
  background-image: url("/imgs/ningbo/T 拷贝.png");
  background-position: left;
  background-size: 100% 100%; /* 确保背景图适配新尺寸 */
  background-repeat: no-repeat;
}

@font-face {
  font-family: '微软雅黑常规';
  src: url("/fonts/MSYH.TTC") format('truetype');
}

@font-face {
  font-family: '微软雅黑粗体';
  src: url("/fonts/MSYHBD.TTC") format('truetype');
}

@font-face {
  font-family: '微软雅黑细体';
  src: url("/fonts/MSYHL.TTC") format('truetype');
}

@font-face {
  font-family: 'FZLanTingHeiS-B-GB';
  src: url("/fonts/FZLTCHJW.TTF") format('truetype');
}

@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url("/fonts/YOUSHEBIAOTIHEI-2.TTF") format('truetype');
}
</style>